<template>
    <view>
        <image
            src="../../static/index/order.png"
            mode=""
            class="cart u-flex-col u-flex-center"
            @click="$func.jump('/pages/order')"
        ></image>
        <!-- <uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="千创到家" color="#ffffff">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view> -->
        <view
            class="toptit top flex align-end"
            :style="{ height: `${configInfo.navBarHeight}px` }"
        >
            <picker
                :range="adreslist"
                range-key="title"
                @change="choseadres"
                class="top_add"
            >
                <view class="u-flex">
                    <view class="top_add_text">{{ city }}</view>
                    <image src="@/static/wImg/san.png" class="top_san"></image>
                </view>
            </picker>

            <view class="text-ff text-center flex-one">千创到家</view>
        </view>
        <image
            :src="configInfo.index_img_url"
            mode=""
            class="barimg"
            @tap.stop="goRich(3)"
        ></image>
        <view style="padding: 0 30rpx; padding-bottom: 180rpx">
            <!-- <u-swiper :list="banner" src="img" height="272" style="margin-top: 20rpx;"></u-swiper> -->
            <banner
                @change="goBanner"
                :list="banner"
                :margin="0"
                :autoplay="true"
                :indicatorActiveColor="primaryColor"
                :dotWidth="20"
                :dotBottom="30"
                v-if="banner.length > 0"
                style="margin-top: 20rpx"
                height="272"
            >
            </banner>
            <view class="classify u-flex u-flex-wrap">
                <view
                    class="u-flex-col u-col-center cla_item"
                    @click="goClass(item.id)"
                    v-for="(item, index) in classifyList"
                    v-if="index != 7"
                >
                    <image
                        :src="item.cover"
                        style="border-radius: 5rpx"
                    ></image>
                    {{ item.title }}
                </view>
                <view
                    class="u-flex-col u-col-center cla_item"
                    @click.stop="
                        $func.jump('/wNew/pages/classification?type=2')
                    "
                >
                    <image
                        src="../../static/wImg/classify8.png"
                        mode=""
                    ></image>
                    更多
                </view>
            </view>
            <!-- 我的足迹 -->
            <view
                class="fill-base pl-lg pr-lg pb-lg margin-top-20 padding-tb-30 radius-10"
                v-if="fplist && fplist.length > 0"
            >
                <view class="flex-between pb-lg">
                    <view class="f-st-title text-bold flex-between">
                        <view class="mr-md" style="width: 15px; height: 17px">
                            <image
                                src="../../static/index/fwzj.png"
                                class="van-img"
                                style="object-fit: cover"
                            ></image>
                        </view>
                        我的足迹
                    </view>
                </view>
                <scroll-view scroll-x class="recommend-technician">
                    <block
                        v-for="(item, index) in fplist"
                        :key="index"
                        @tap.stop="foFuwu(item.service_id)"
                    >
                        <view
                            class="recommend-item type-1"
                            @tap.stop="foFuwu(item.service_id)"
                        >
                            <!-- #ifdef H5 -->
                            <view class="cover radius-16">
                                <view
                                    class="h5-image cover radius-16"
                                    :style="{
                                        backgroundImage: `url('${item.image}')`,
                                    }"
                                >
                                </view>
                            </view>
                            <!-- #endif -->
                            <!-- #ifndef H5 -->
                            <image
                                mode="aspectFill"
                                lazy-load
                                class="cover radius-16"
                                :src="item.image"
                            ></image>
                            <!-- #endif -->
                            <view
                                class="flex-center f-desc c-title text-bold mt-md"
                            >
                                <view class="ellipsis">{{ item.title }}</view>
                            </view>
                        </view>
                    </block>
                </scroll-view>
            </view>
            <view class="flex align-center justify-center margin-top-20">
                <image src="../../static/index/fwtit.png" class="btimg"></image>
                <view
                    class="text-28 text-bold margin-lr-10"
                    style="color: #606dce"
                    >服务列表</view
                >
                <image src="../../static/index/fwtit.png" class="btimg"></image>
            </view>
            <view
                class="padding-lr-20 padding-tb-30 bg-ff radius-10 flex align-center margin-20"
                v-for="(item, index) in platform_bk"
                :key="index"
                @click="foFuwu(item.id)"
            >
                <image :src="item.cover" mode="" class="amimg"></image>
                <view class="flex-one margin-left-20">
                    <view class="flex align-center">
                        <view class="flex-one text-30 text-bold">{{
                            item.sub_title
                        }}</view>
                        <view class="text-24 text-cb"
                            >{{ item.total_sale }}人已体验</view
                        >
                    </view>
                    <view class="flex align-center margin-top-25">
                        <view class="text-a3 text-26">{{
                            item.sub_title
                        }}</view>
                    </view>
                    <view class="flex align-end margin-top-15">
                        <view class="flex align-end flex-one">
                            <view class="amtime">{{ item.time_long }}分钟</view>
                            <view class="text-40 height-45 margin-left-10">
                                <text class="text-26">￥</text>{{ item.price }}
                            </view>
                            <view
                                class="text-26 text-cb text-del height-30 margin-left-10"
                                >￥{{ item.init_price }}</view
                            >
                        </view>
                        <view class="amdetail">查看详情</view>
                    </view>
                </view>
            </view>
        </view>
        <u-tabbar
            v-model="current"
            @change="changeTab"
            height="55px"
            active-color="#606DCE"
            inactive-color="#989898"
            :list="tabList"
        ></u-tabbar>
        <view class="layer" v-if="addShow">
            <view class="layer-content">
                <view
                    class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between"
                >
                    <view class="text-cc" @click="addShow = false">取消</view>
                    <view class="" style="color: #007aff" @click="adresSubmit()"
                        >确定</view
                    >
                </view>
                <picker-view
                    :value="multiIndex"
                    :indicator-style="indicatorStyle"
                    class="picker-view"
                    @change="changeAdres"
                >
                    <picker-view-column>
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist1"
                            :key="index"
                            >{{ item.name }}
                        </view>
                    </picker-view-column>
                    <picker-view-column v-if="arealist2">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist2"
                            :key="index"
                            >{{ item.name }}
                        </view>
                    </picker-view-column>
                    <picker-view-column v-if="arealist3">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist3"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                </picker-view>
            </view>
        </view>
        <!-- <u-picker v-model="addShow" @confirm="addConfirm" mode="region"></u-picker> -->
    </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            top: 0,
            city: "",
            addShow: false,
            sshow: true,
            list: [],
            tabList: [
                {
                    iconPath: "/static/tab/service_nor.png",
                    selectedIconPath: "/static/tab/service_sel.png",
                    text: "首页",
                },
                {
                    iconPath: "/static/tab/cate_nor.png",
                    selectedIconPath: "/static/tab/cate_sel.png",
                    text: "分类",
                },
                {
                    iconPath: "/static/tab/live_nor.png",
                    selectedIconPath: "/static/tab/live_sel.png",
                    text: "直播",
                },
                {
                    iconPath: "/static/tab/dynamic_nor.png",
                    selectedIconPath: "/static/tab/dynamic_sel.png",
                    text: "动态",
                },

                {
                    iconPath: "../../static/tab/wode_nor.png",
                    selectedIconPath: "../../static/tab/wode_sel.png",
                    text: "我的",
                },
            ],
            current: 0,
            platform_bk: "",
            platform_bk: "",
            platform_ms: "",
            arealist1: [],
            arealist2: [],
            arealist3: [],
            areaname: "",
            multiIndex: [0, 0, 0],
            indicatorStyle: "height: 80rpx;",
            fplist: [],
            banner: [],
            adreslist: [],
            city_lat: "",
            city_lng: "",
            city_id: "",
        };
    },
        watch: {
        tabList: {
            handler(newVal, oldVal) {
                if (
                    newVal[2].text == "直播" &&
                    uni.getStorageSync("configInfo").live_switch == 0
                )
                    return newVal.splice(2, 1);
            },
            deep: true,
            immediate: true,
        },
    },
    computed: mapState({
        configInfo: (state) => state.config.configInfo,
        list: (state) => state.service.list,
        location: (state) => state.user.location,
    }),
    async onLoad() {
        let res = uni.getSystemInfoSync();
        if (res.safeAreaInsets.top == 0) {
            this.top = 20;
        } else {
            this.top = res.safeAreaInsets.top;
        }
        console.log(this.location, "location");
        uni.getLocation({
            type: "wgs84",
            success: (res) => {
                console.log(res, "定位");
                uni.setStorageSync("lat", res.latitude);
                uni.setStorageSync("lng", res.longitude);
            },
        });

        // var city_name = uni.getStorageSync('city_name')
        // if (city_name) {
        // 	this.city = city_name
        // }

        this.indexFn();
        this.$u.post("/api/index/area_list", {}).then((res) => {
            if (res.code == 1) {
                var address = res.data;
                this.arealist1 = address;
                this.arealist2 = address[0].children;
                this.arealist3 = address[0].children[0].children;
            }
        });
        // this.$u.post('/api/index/get_index_category', {
        // 	location_city: uni.getStorageSync('city')
        // }).then(res => {
        // 	if (res.code == 1) {
        // 		this.classifyList = res.data
        // 	}
        // });
    },
    async onReady() {
        console.log(uni.getStorageSync("lat"), "经纬度");
        let data = await this.$api.service.getCity({
            lat: uni.getStorageSync("lat")
                ? uni.getStorageSync("lat")
                : this.location.lat,
            lng: uni.getStorageSync("lng")
                ? uni.getStorageSync("lng")
                : this.location.lng,
        });
        console.log(data);
        this.city = data[0].title;
        this.city_lat = data[0].lat;
        this.city_lng = data[0].lng;
        this.city_id = data[0].id;
        this.adreslist = data;
    },
    onShow() {
        this.getfootprints();
        this.getList();
    },
    methods: {
        //选择城市
        choseadres(e) {
            this.city = this.adreslist[e.detail.value].title;
            this.city_lat = this.adreslist[e.detail.value].lat;
            this.city_lng = this.adreslist[e.detail.value].lng;
            this.city_id = this.adreslist[e.detail.value].id;
            this.getList();
        },
        //足迹
        async getfootprints() {
            let res = await this.$api.service.footPrint({
                shopFootprints: 0,
                serviceFootprints: 1,
            });
            console.log(res, "足迹");
            this.fplist = res;
        },
        //服务列表
        async getList() {
            let res = await this.$api.service.serviceIndex({
                lat: this.city_lat,
                lng: this.city_lng,
                city_id: this.city_id,
            });
            console.log(res.banner, "服务列表");
            this.platform_bk = res.service;
            this.banner = res.banner;
            this.classifyList = res.service_cate;
        },
        indexFn() {
            this.$u.post("/api/index/get_banner").then((res) => {
                if (res.code == 1) {
                    this.list = res.data;
                }
            });
        },
        titFn(index) {
            this.titIndex = index;
            this.sshow = false;
            this.mescroll.resetUpScroll();
        },
        upCallback(page) {
            this.mescroll.optDown.use = false;
            this.mescroll.optUp.textNoMore = "- 已经到底啦 -";
            this.$u
                .post("/api/index/likes", {
                    page: page.num,
                    limit: page.size,
                    type: this.titIndex + 1,
                    location_city: uni.getStorageSync("city"),
                })
                .then((res) => {
                    this.mescroll.endBySize(
                        res.data.data.length,
                        res.data.total
                    );
                    if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.data); //追加新数据
                    this.sshow = true;
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
        changeTab(e) {
            if (e == 0) {
                this.$func.jump("/pages/service");
            } else if (e == 1) {
                this.$func.jump("/wNew/pages/fuwucate");
            } else if (e == 3) {
                this.$func.jump("/subPages/technician/tabBar/dynamic");
            } else if (e == 2) {
                this.$func.jump("/live/pages/live/liveList?type=2");
            } else if (e == 4) {
                this.$func.jump("/subPages/technician/tabBar/mine");
            }
        },
        addConfirm(e) {
            this.city = e.city.label;
            console.log(e);
            var dz = e.province.label + "/" + e.city.label;
            uni.setStorageSync("city", dz);
            this.$u
                .post("/api/index/get_hot", {
                    location_city: uni.getStorageSync("city"),
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.platform_bk = res.data.platform_bk;
                        this.platform_bk = res.data.platform_bk;
                        this.platform_ms = res.data.platform_ms;
                    }
                });
            this.$u
                .post("/api/index/likes", {
                    page: 1,
                    location_city: uni.getStorageSync("city"),
                })
                .then((res) => {
                    this.flowList = res.data.data; //追加新数据
                });
        },
        changeAdres(e) {
            let curMultiIndex = e.detail.value;
            if (curMultiIndex[0] != this.multiIndex[0]) {
                this.multiIndex = [curMultiIndex[0], 0, 0];
            } else if (curMultiIndex[1] != this.multiIndex[1]) {
                this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0];
            } else if (curMultiIndex[2] != this.multiIndex[2]) {
                this.multiIndex = [
                    this.multiIndex[0],
                    this.multiIndex[1],
                    curMultiIndex[2],
                ];
            }
            console.log(this.multiIndex);
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            this.arealist2 = this.arealist1[i].children;
            this.arealist3 = this.arealist1[i].children[j].children;
            console.log(this.cateid);
        },
        adresSubmit() {
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            var dz =
                this.arealist1[i].name +
                "/" +
                this.arealist1[i].children[j].name;
            this.city = this.arealist1[i].children[j].name;
            // uni.setStorageSync('city', dz)
            // uni.setStorageSync('city_name', this.arealist1[i].children[j].name)
            this.$u
                .post("/api/index/get_hot", {
                    location_city: uni.getStorageSync("city"),
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.platform_bk = res.data.platform_bk;
                        this.platform_hot = res.data.platform_hot;
                        this.platform_ms = res.data.platform_ms;
                    }
                });
            this.$u
                .post("/api/index/likes", {
                    page: 1,
                    location_city: uni.getStorageSync("city"),
                    type: this.titIndex + 1,
                })
                .then((res) => {
                    this.flowList = res.data.data; //追加新数据
                    this.mescroll.endBySize(
                        res.data.data.length,
                        res.data.total
                    );
                });
            this.addShow = false;
        },
        goClass(id) {
            if (id) {
                uni.navigateTo({
                    url: "/wNew/pages/fuwucate?id=" + id,
                });
            } else {
                uni.navigateTo({
                    url: "/wNew/pages/fuwucate",
                });
            }
        },
        goRich(type) {
            uni.navigateTo({
                url: "/pages/rich?type=" + type,
            });
        },
        foFuwu(id) {
            uni.navigateTo({
                url: "/user/pages/detail?id=" + id,
            });
        },
        goBanner(e) {
            console.log(e);
            if (e.connect_type == 1) {
                this.$util.previewImage({
                    current,
                    urls: [current],
                });
            } else if (e.connect_type == 2) {
                this.$util.goUrl({
                    url: `/user/pages/article?id=${id}`,
                });
            } else if (e.connect_type == 3) {
                this.$util.goUrl({
                    url: "/wNew/pages/fuwucate?id=" + e.type_id,
                });
            } else if (e.connect_type == 4) {
                this.$util.goUrl({
                    url: "/user/pages/detail?id=" + e.type_id,
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import url(../../components/common.css);

.cart {
    width: 140rpx;
    height: 140rpx;
    position: fixed;
    bottom: 200rpx;
    border-radius: 50%;
    background: #fff;
    right: 20rpx;
    z-index: 9999;
    font-size: 28rpx;

    image {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 7rpx;
    }
}

.top {
    // padding: 0 30rpx 200rpx;
    padding-bottom: 30rpx;

    .top_add {
        position: absolute;
        left: 30rpx;

        .top_add_text {
            // width: 120rpx;
            font-size: 28rpx;
            color: #fff;
            overflow: hidden; // 文字超长隐藏
            text-overflow: ellipsis; // 显示...
            white-space: nowrap; // 单行显示
        }

        .top_san {
            width: 22rpx;
            height: 10rpx;
            margin-left: 10rpx;
        }
    }

    .top_sea {
        flex: 1;
        z-index: 999;
        margin-left: 40rpx;
        height: 60rpx;
        padding: 0 18rpx;
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 10rpx 10rpx 10rpx 10rpx;

        .top_sea_img {
            width: 25.15rpx;
            height: 23.6rpx;
        }

        input {
            color: #fff;
            height: 20rpx;
            font-size: 24rpx;
            padding: 0 18rpx;
            margin-left: 18rpx;
            border-left: 1rpx solid #fff;
        }
    }
}

.classify {
    background: #fff;
    margin-top: 20rpx;
    padding: 30rpx 58rpx 6rpx;
    border-radius: 20rpx;

    .cla_item {
        font-size: 24rpx;
        color: #333;
        z-index: 999;
        margin-right: 60rpx;
        margin-bottom: 24rpx;

        &:nth-child(4n) {
            margin-right: 0;
        }

        image {
            width: 80rpx;
            height: 80rpx;
            margin-bottom: 12rpx;
        }
    }
}

.burst {
    margin-top: 20rpx;

    .burst_left {
        width: 48%;
        background: #fff;
        border-radius: 20rpx;

        .bur_top {
            width: 100%;
            height: 48rpx;
            text-align: right;
            position: relative;

            image {
                width: 100%;
                height: 48rpx;
                position: absolute;
            }

            .bur_more {
                font-size: 20rpx;
                color: #999;
                padding-right: 10rpx;
            }
        }

        .bur_item {
            width: 148rpx;
            margin-bottom: 10rpx;

            image {
                width: 148rpx;
                height: 148rpx;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
            }

            .bur_price {
                font-size: 24rpx;
                color: #ff5125;
                margin-top: 10rpx;
            }
        }
    }
}

.tit {
    background: #fff;
    height: 76rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;
    margin-bottom: 10rpx;

    .tit_item {
        width: 50%;
        z-index: 999;
        display: flex;
        color: #666666;
        align-items: center;
        justify-content: center;

        &:first-child {
            border-right: 1rpx solid #dbdbdb;
        }

        text {
            font-size: 28rpx;
            font-weight: bold;
            letter-spacing: 8rpx;
            margin: 0 3rpx 0 7rpx;
        }

        image {
            width: 23rpx;
            height: 19rpx;
            margin-bottom: -6rpx;
        }
    }

    .tit_css {
        color: #1db481;
    }
}

.demo-warter {
    border-radius: 8px;
    margin-bottom: 15rpx;
    background-color: #ffffff;
    padding: 8px;
    position: relative;
    width: 340rpx;
    display: inline-block;
}

.demo-image {
    width: 100%;
    border-radius: 4px;
}

.demo-title {
    // font-size: 30rpx;
    // margin-top: 5px;
    // color: $u-main-color;
}

.demo-tag {
    display: flex;
    margin-top: 5px;
}

.demo-tag-owner {
    background-color: $u-type-error;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 4rpx 14rpx;
    border-radius: 50rpx;
    font-size: 20rpx;
    line-height: 1;
}

.demo-tag-text {
    border: 1px solid #f43000;
    color: #f43000;
    margin-right: 8px;
    line-height: 1;
    padding: 8rpx 24rpx 8rpx 24rpx;
    display: flex;
    align-items: center;
    border-radius: 4rpx;
    font-size: 20rpx;
}

.demo-tag-text-grey {
    border: 1px solid #999;
    color: #999;
}

.mark {
    font-size: 20rpx;
    color: #fff;
    padding: 6rpx 10rpx;
    background: #1db481;
    border-radius: 4rpx;
    margin-right: 20rpx;
}

.markOra {
    background: #ef5205;
}

.demo-price {
    font-size: 30rpx;
    color: $u-type-error;
    margin-top: 5px;
    font-weight: bold;
    font-size: 32rpx;

    text {
        font-size: 20rpx;
    }

    .demo-price-grey {
        color: #d3d3d3;
        font-size: 20rpx;
        font-weight: 400;
        margin-left: 18rpx;
        text-decoration: line-through;
    }
}

.demo-shop {
    font-size: 22rpx;
    color: $u-tips-color;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    image {
        width: 20rpx;
        height: 20rpx;
        margin-right: 8rpx;
    }
}

.layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.layer-content {
}

/* 浮层内容 */
.confirm-bar {
    position: fixed;
    bottom: 600rpx;
    left: 0;
    width: 750rpx;
}

.line-height-80 {
    height: 80rpx;
    line-height: 80rpx;
}

.padding-lr-30 {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.bg-ff {
    background: #fff;
}

.border-bottom-ed {
    border-bottom: 1rpx solid #ededed;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 600rpx;
    background: #fff;
}

.item-pircker {
    line-height: 80rpx;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.listbox {
    width: 100%;
    // height: 100vh;
    column-count: 2;
    column-gap: 0;
    margin-top: 20rpx;
    overflow: hidden;
    // column-gap: 10px;
    // display: flex;
    // justify-content: space-between;
    // flex-wrap: wrap;
}

.barimg {
    width: 690rpx;
    height: 120rpx;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    margin: 20rpx auto 0;
    display: block;
}

.searchimg {
    width: 25rpx;
    height: 23rpx;
}

.searchline {
    width: 2rpx;
    height: 32rpx;
    background: #b0b0b0;
    margin: 0 20rpx;
}

.van-img {
    width: 100%;
    height: 100%;
}

.recommend-technician {
    white-space: nowrap;

    // width: 690rpx;
    // overflow: hidden;
    .recommend-item {
        display: inline-block;
    }

    .recommend-item.type-1 {
        width: 180rpx;
        margin-left: 26rpx;

        .cover {
            width: 180rpx;
            height: 180rpx;
        }

        .ellipsis {
            max-width: 180rpx;
        }
    }

    .recommend-item.type-2 {
        width: 203rpx;
        height: 151rpx;
        background: #f4f6f7;
        border-radius: 12rpx;
        margin-left: 20rpx;

        .cover {
            width: 70rpx;
            height: 70rpx;
        }

        .ellipsis {
            max-width: 82rpx;
        }

        .iconyduixingxingshixin {
            font-size: 26rpx;
            background-image: -webkit-linear-gradient(
                270deg,
                #fad961 0%,
                #f76b1c 100%
            );
        }

        .star-text {
            height: 26rpx;
            color: #ff9519;
            margin-left: 6rpx;
        }

        .new-technician {
            width: 67rpx;
            height: 30rpx;
            border-radius: 8rpx;
            transform: rotateZ(360deg);
        }
    }

    .recommend-item:nth-child(1) {
        margin-left: 0;
    }
}

.btimg {
    width: 24rpx;
    height: 20rpx;
}

.zbimg {
    width: 24rpx;
    height: 20rpx;
}

.toptit {
    background: linear-gradient(180deg, #5d64ca 0%, #6f9bdf 100%);
}

.amimg {
    width: 176rpx;
    height: 176rpx;
    border-radius: 10rpx;
}

.amtime {
    // width: 74rpx;
    height: 28rpx;
    background: linear-gradient(269deg, #4f5052 0%, #101010 100%);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    padding: 0 6rpx;
    font-size: 20rpx;
    color: #f2f1d2;
    line-height: 28rpx;
}

.amdetail {
    width: 140rpx;
    height: 52rpx;
    background: #606dce;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    font-size: 26rpx;
    color: #ffffff;
    line-height: 52rpx;
    text-align: center;
}
</style>